<template>
  <div class="app-container">
    <zl-table ref="table" url="/message/systemList" :param.sync="par" :default-sort="{prop:'createDt',order:'descending'}">
      <template slot="search">
        <el-form :inline="true" :model="par" class="left">
          <el-form-item label="标题">
            <el-input v-model="par.title" clearable placeholder="输入参数名" />
          </el-form-item>
          <el-form-item label="发送状态">
            <el-select v-model="par.status" placeholder="请选择" clearable>
              <el-option label="待发送" :value="1" />
              <el-option label="成功" :value="2" />
              <el-option label="失败" :value="3" />
            </el-select>
          </el-form-item>
          <el-form-item label="接收状态">
            <el-select v-model="par.readStatus" placeholder="请选择" clearable>
              <el-option label="未读" :value="0" />
              <el-option label="已读" :value="1" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" size="small" @click="query">搜 索</el-button>
          </el-form-item>
        </el-form>
      </template>
<!--      <template slot="toolbar">
        <el-row :gutter="10">
          <el-col :span="1.5">
            <el-button size="small" plain type="primary" icon="el-icon-plus" @click="addSetting">新 增</el-button>
          </el-col>
        </el-row>
      </template>-->
      <template slot="cols">
        <el-table-column align="center" width="50px" type="index" :index="indexMethod" />
        <el-table-column min-width="150px" prop="title" label="标题" align="left" show-overflow-tooltip sortable="custom">
          <template slot-scope="scope">
            <a class="main-color point filename" @click="showMsg(scope.row)">{{ scope.row.title }}</a>
          </template>
        </el-table-column>
        <el-table-column width="140px" prop="fromName" label="发件人" align="center" show-overflow-tooltip sortable="custom"/>
        <el-table-column prop="type" label="消息类型" width="120px" align="center" show-overflow-tooltip sortable="custom">
          <template slot-scope="scope">
            <span>{{ messageTypeMap[scope.row.type] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createDt" label="发送时间" width="170px" align="center" show-overflow-tooltip sortable="custom"/>
        <el-table-column prop="receiveName" label="接收人" width="140px" align="center" show-overflow-tooltip sortable="custom"/>
        <el-table-column prop="address" label="接收地址" min-width="150px" show-overflow-tooltip sortable="custom"/>
        <el-table-column prop="status" label="发送状态" align="center" width="100px" show-overflow-tooltip sortable="custom">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status===1" type="primary">待发送</el-tag>
            <el-tag v-else-if="scope.row.status===2" type="success">已发送</el-tag>
            <el-tag v-else type="danger">发送失败</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="readStatus" label="接收状态" align="center" width="100px" show-overflow-tooltip sortable="custom">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.readStatus===1" type="primary">已读</el-tag>
            <el-tag v-else type="danger">未读</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="100px">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status===2" title="重发" type="primary" circle plain class="el-icon-refresh"
                       size="mini" @click.native.prevent="reSend(scope.$index, scope.row)"/>
            <el-button v-else title="发送" type="primary" circle plain class="iconfont icon-tuichu1" size="mini"
              @click.native.prevent="reSend(scope.$index, scope.row)"/>
          </template>
        </el-table-column>
      </template>
    </zl-table>
    <el-dialog title="消息详情" :visible.sync="view.show" destroy-on-close :append-to-body="true" :close-on-click-modal="false" width="800px">
      <el-form label-width="100px">
        <el-form-item label="标题：" prop="title">
          <span>{{ view.form.title }}</span>
        </el-form-item>
        <el-form-item label="接收人：" prop="duplicates">
          <el-tag
            v-for="(o,i) in view.form.detailQueryList"
            :key="i"
            type="warning"
            class="inline-block m5"
          >{{ o.userName }}{{ o.receiveType===2 ? '(抄送)' : '' }}</el-tag>
        </el-form-item>
        <el-form-item label="" label-width="0" prop="content">
          <div style="max-height: 300px;overflow-y: auto">
            <Editor v-if="view.show" id="viewEditorSend" :value="view.form.content" :minHeight="150" :readOnly="true"/>
          </div>
        </el-form-item>
        <el-form-item label="附件：" prop="attachInfoList" v-if="view.form.attachInfoList!=null && view.form.attachInfoList.length> 0">
          <el-row v-for="(o,i) in view.form.attachInfoList" :key="i">
            <a class="main-color point" @click="downloadFile(o)">{{ o.fileName }}</a>
          </el-row>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="view.show = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import { validator } from '@/utils/form'
import { Mixin } from '@/utils/mixin'
import ZlTable from '@/components/table/table-con'
import { reSendMessage } from '@/api/message'
export default {
  name: 'SystemMessage',
  mixins: [Mixin],
  components: { ZlTable },
  data() {
    return {
      par: {
        title: '',
        status: null,
        readStatus: null
      },
      view: {
        show: false,
        form: {
          title:'',content:'',level:0,timer:0,type:0,detailQueryList:[],attachInfoList:[]
        }
      },
    }
  },
  computed: {
    rules() {
      return {
        module: [
          { validator: validator('notBlank'), message: '模块名不能为空', trigger: ['blur', 'change'] }
        ],
        name: [
          { validator: validator('notBlank'), message: '参数名不能为空', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  mounted() {

  },
  methods: {
    downloadFile(row){
      this.download('/sys/attach/download',{id:row.attachId},row.fileName)
    },
    showMsg(row) {
      this.view.form = this.$util.copy(row)
      this.view.show = true
    },
    reSend(index, row) {
      if(row.type === 1 && this.$util.isBlank(row.address)){
        this.$message.warning('收件人邮箱地址为空')
        return
      }
      this.$confirm('确定要发送消息吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        reSendMessage(row.sendId,row.detailId).then(()=>{
          this.query()
          this.$message.success('发送成功')
        })
      }).catch(() => {});
    },

    query() {
      this.$refs.table.query()
    },
    indexMethod(index) {
      return (this.$refs.table.pageNum - 1) * this.$refs.table.pageSize + index + 1
    }
  }
}
</script>
<style scoped>

</style>
